import React, { Component, Fragment } from 'react';
import { Card, Spin, Icon, Alert } from 'antd';
import './ui.less';

export default class Loading extends Component {
  render() {
    const loading = <Icon type="loading" />;
    return (
      <Fragment>
        <Card title="Spin用法" className="card-wrap">
          <Spin size="small" />
          <Spin />
          <Spin size="large" />
          <Spin indicator={loading} />
        </Card>

        <Card title="内容遮罩" className="card-wrap">
          <Spin spinning={false}>
            <Alert message="info Text" type="info" />
          </Spin>
          <Spin>
            <Alert message="Success Text" type="success" />
          </Spin>
          <Spin indicator={loading}>
            <Alert message="warning Text" type="warning" />
          </Spin>
          <Spin tip="加载中">
            <Alert
              message="error Text"
              description="This is a warning notice about error."
              type="error"
            />
          </Spin>
        </Card>
      </Fragment>
    );
  }
}
